<template>
  <div class="shoplist">
    <div class="top">
        <div class="title">饿了么</div>
        <input type="text" placeholder="输入商家、商品名称">
    </div>
    <div class="banner">
        <img   v-for="(item,index) in arr1" :key="index" :src="item.bannerUrl" alt="">
    </div>
    <div class="guess">猜你喜欢</div>
    <div class="option">
        <div>综合排序</div>
        <div>距离最近</div>
        <div>销量最高</div>
        <div>筛选</div>
    </div>
    <div class="box">
        <div>年货节热卖</div>
        <div>津贴联盟</div>
        <div>满减优惠</div>
        <div>品质联盟</div>
    </div>
    <div class="item">
        <div class="list" v-for="(item,index) in arr" :key="index">
        <img :src="item.picUrl" alt="">
        <div class="right">
            <div class="name">{{item.name}}</div>
            <div class="count">{{item.monthSalesTip}}</div>
            <div class="qisong">
                <span>{{item.minPriceTip}}</span>
                <span>{{item.distance}}</span>
            </div>
        </div>    
    </div>
    </div>
    
  </div>
</template>

<script>
import {shoplist} from '../api/index'
import {banner} from '../api/index'
export default {
    data(){
       return{
        arr:[],
        arr1:[]
       }
    },
    mounted(){
        shoplist({}).then((res)=>{
            console.log(res.data.list);
            this.arr = res.data.list
        }),
        banner({}).then((res)=>{
            console.log(res.data.list);
            this.arr1 = res.data.list
        })
    },  
}
</script>

<style scoped> 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input,button{
    border: 0;
    outline:none;
}
.shoplist{
    width: 100%;
}
.shoplist .top{
    background-color: skyblue;
    padding: 10px;
}
.shoplist .top .title{
    color: white;
    font-size: 20px;
    font-weight: 700;
}
.shoplist .top input{
    height: 30px;
    width: 100%;
    margin-top: 5px;
    text-align: center;
    line-height: 30px;
    color: gray;
    border-radius: 20px;
}
.shoplist .banner{
    height: 100px;
    position: relative;
}
.shoplist .banner img{
    padding: 10px;
    width: 100%;
    position: absolute;
}
.shoplist .guess{
    font-size: 18px;
    padding: 10px;
    font-weight: 700;
    color: rgb(48, 40, 40);
}
.shoplist .option{
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    color:rgb(48, 40, 40) ;
}
.shoplist .box{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    color: rgb(48, 40, 40);
    font-size: 12px;
}
.shoplist .box div{
    background-color: rgba(212, 206, 206, 0.472);
    height: 26px;
    width: 24%;
    text-align: center;
    line-height: 26px;
    border-radius: 3px
    ;
}
.shoplist .item{
    height: 400px;
    overflow: auto;
}
::-webkit-scrollbar{
    display: none;
}
.shoplist .list{
    display: flex;
    padding: 10px;
}
.shoplist .list img{
    width: 20%;
    margin-right: 10px;
}
.shoplist .list .right{
    width: 80%;
}
.shoplist .list .right .name{
    font-size: 14px;
    font-weight: 700;
    color: rgb(48, 40, 40);
    margin-bottom: 10px;
}
.shoplist .list .right .count{
    font-size: 12px;
    color: rgb(161, 155, 155);
    margin-bottom: 5px;
}
.shoplist .list .right .qisong{
    font-size: 14px;
    color: rgb(161, 155, 155);
    display: flex;
    justify-content: space-between;
}
</style>